<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="./lib/echarts.min.js"></script>
    </head>
    <body>
        <div id="main" style="width: 600px; height: 400px"></div>
        <script>
            // 1. 引入 echarts
            // 2. 创建一个容器div
            // 3. 初始化 echarts 并选择容器
            // 4. 设置配置项 option
            // 5. 使用 setOption 方法，设置数据

            const myChart = echarts.init(document.querySelector("#main"));
            const option = {
                grid: {
                    left: "5%",
                    right: "1%",
                    top: "20%",
                    bottom: "15%",
                    containLable: true,
                },
                legend: {
                    bottom: "0%",
                    // 图例之间的间隔
                    itemGap: 40,
                    // 图例的宽度
                    itemWidth: 30,
                    // 图例的高度
                    itemHeight: 12,
                    icon: "rect",
                    textStyle: {
                        fontSize: 14,
                        color: "#64bcff",
                    },
                },
                tooltip: {
                    trigger: "axis",
                    axisPoninter: {
                        type: "line",
                        lineStyle: {
                            color: "#20FF89",
                        },
                    },
                },
                xAxis: {
                    type: "category",
                    // 轴线
                    axisLine: {
                        show: false,
                    },
                    // 分割线
                    splitLine: {
                        show: false,
                    },
                    // 轴文字
                    axislabel: {
                        color: "#64BCFF",
                    },
                    // 刻度
                    axisTick: {
                        show: false,
                    },
                    data: [
                        "一月",
                        "二月",
                        "三月",
                        "四月",
                        "五月",
                        "六月",
                        "七月",
                        "八月",
                        "九月",
                        "十月",
                        "十一月",
                        "十二月",
                    ],
                },
                yAxis: {
                    type: "value",
                    // 分割线
                    splitLine: {
                        show: false,
                    },
                    // 轴文字
                    axislabel: {
                        color: "#64BCFF",
                    },
                    // 刻度
                    axisTick: {
                        show: false,
                    },
                },
                series: [
                    {
                        name: "正常",
                        type: "line",
                        // 平滑的折线
                        smooth: true,
                        // 折线的断点大小
                        // symbolSize: 5,
                        // 是否显示折线短点
                        showSymbol: false,
                        itemStyle: {
                            color: "#20FF89",
                        },
                        areaStyle: {
                            color: {
                                type: "linear",
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: "#20FF89", // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(255,255,255,0)", // 100% 处的颜色
                                    },
                                ],
                                global: false, // 缺省为 false
                            },
                        },
                        data: [
                            200, 200, 191, 234, 205, 330, 310, 210, 154, 190,
                            330, 410,
                        ],
                    },
                    {
                        name: "异常",
                        type: "line",
                        // 平滑的折线
                        smooth: true,
                        // 折线的断点大小
                        // symbolSize: 5,
                        // 是否显示折线短点
                        showSymbol: false,
                        itemStyle: {
                            color: "#EA9502",
                        },
                        areaStyle: {
                            color: {
                                type: "linear",
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: "#EA9502", // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(255,255,255,0)", // 100% 处的颜色
                                    },
                                ],
                                global: false, // 缺省为 false
                            },
                        },
                        data: [
                            500, 300, 202, 258, 280, 660, 320, 202, 308, 280,
                            640, 420,
                        ],
                    },
                ],
            };
            myChart.setOption(option);
        </script>
    </body>
</html>
